<template>
  <div id="app" align="center">
    <el-form ref="addForm" :model="user" label-width="80px" :rules="ruleForm">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="user.age"></el-input>
      </el-form-item>
      <el-form-item label="生日" prop="bir">
        <el-input v-model="user.bir"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="content">
        <el-input v-model="user.content"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="user.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="addUser">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AddUser",
  data(){
    return{
      user:{},
      ruleForm:{
        name:[{required:true,message:"姓名不能为空",trigger:"blur"}],
        age:[{required:true,type:"number",message:"年龄不能为空",trigger:"blur"}],
        bir:[{required:true,message:"生日不能超过当前日期",trigger:"blur"}],
        content:[{required:true,message:"简介不能为空",trigger:"blur"}],
        address:[{required:true,message:"地址不能为空",trigger:"blur"}]
      }
    }
  },
  methods:{
    addUser(){
      this.$refs["addForm"].validate(valid=>{
        if(valid){
          this.axios.post("",this.user).then(res=>{
            this.$message.success("添加成功");
            this.$router.push("/user/show");
          })

        }
      })
    }
  }
}
</script>

<style scoped>
#app{
  text-align: center;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
</style>
